<template>
	<view>
		<view class="">
			<view class="brand">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<!-- 轮播图 -->
					<swiper-item v-for="(item,index) in zonglist.mainPictures" :key="index">
						<view class="swiper-item">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="price">
					￥{{zonglist.price}}
				</view>
			</view>


			<view class="">
				<view class="name">
					<view class="nameone">
						{{zonglist.name}}
					</view>
					<view class="nametwo">
						{{zonglist.desc}}
					</view>
				</view>
				<view class="text">
					<text class="textone">选择</text>
					<text @click="xuanDrawer('showLeft')">请选择商品规格</text>
				</view>
				<view class="text">
					<text class="textone">送至</text>
					<text @click="showDrawer('showLeft')">请选择收货地址</text>
				</view>
				<view class="text">
					<text class="textone">服务</text>
					<text @click="wuDrawer('showLeft')">无忧退 快速退款 免费包邮</text>
				</view>
			</view>
			<!-- 详情 -->
			<view class="">
				<view class="">
					<text>品名</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>净含量</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>包装</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>产地</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>保质期</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>食用方法</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>配料表1</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>配料表2</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>致敏物质2</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>储存条件</text>
					<text>{{}}</text>
				</view>
				<view class="">
					<text>温馨提示</text>
					<text>{{}}</text>
				</view>
			</view>

			<!-- 底部 -->
			<!-- <view class="buttom">
				<view class="">
					<text>收藏</text>
				</view>
				<view class="">
					<text>购物车</text>
				</view>
				<view class="">
					<button>加入购物车</button>
				</view>
				<view class="">
					<button>立即购买</button>
				</view>
			</view> -->
			<uni-section title="基础用法" type="line" class="goods-carts">
				<uni-goods-nav @click="onClick" @buttonClick='buttonClick'/>
			</uni-section>


		</view>



		<!-- 弹出框 -->
		




	</view>
</template>

<script>
	import {
		xiang
	} from '../../reques/api.js'
	export default {
		data() {
			return {
				zonglist: '',
				list:'',
				list1:'',
				type: 'center',
				// brandlist:''
			};
		},
		onLoad(options) {
			console.log(options.id);
			xiang({
				id: options.id
			}).then(res => {

				this.zonglist = res.data.result
				console.log(this.zonglist);
				// this.brandlist=res.data.result.brand
				// console.log(this.brandlist);

			})
		},
		methods: {
			
			onClick(e) {
				console.log(e);
				if(e.index==0){
					console.log('点击了收藏');
				}else{
					console.log('点击了购物车');
					uni.switchTab({
						url:"/pages/shop/shop"
					})
				}
			},
			buttonClick(e) {
							console.log(e.index)
							if(e.index==0){
								// console.log('点击了添加');
								let list1=uni.getStorageSync('cars')||[]
								let index=list1.find(item=>item.id==this.zonglist.id)
								if(index){
									index.count++
								}else{
									list1.push({...this.zonglist,type:false,count:1})
								}
								uni.setStorageSync('cars',list1)
							}else{
								console.log('点击了立即购买');
							}
						}
		}
	}
</script>

<style lang="scss">
	.brand {
		width: 100%;
		// height: 200rpx;
		position: relative;

		.swiper-item {
			width: 100%;
			height: 350rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.price {
			width: 100%;
			height: 100rpx;
			background-color: pink;
			position: absolute;
			top: 253rpx;
			font-size: 36rpx;
			padding: 30rpx;
			box-sizing: border-box;
			color: #fff;

		}
	}

	.name {
		width: 100%;
		height: 200rpx;
		padding: 10rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;

		.nameone {
			font-size: 50rpx;
			margin: 20rpx;
		}

		.nametwo {
			color: red;
			margin: 20rpx;
		}
	}

	.text {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding: 10rpx;
		border-top: 1rpx solid #ccc;
		border-bottom: 1rpx solid #ccc;

		.textone {
			color: #ccc;
			margin-right: 20rpx;
		}
	}



	.example-body {
		padding: 10px;
	}

	.scroll-view {
		/* #ifndef APP-NVUE */
		width: 100%;
		height: 100%;
		/* #endif */
		flex: 1
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.info {
		padding: 15px;
		color: #666;
	}

	.info-text {
		font-size: 14px;
		color: #666;
	}

	.info-content {
		padding: 5px 15px;
	}

	.close {
		padding: 10px;
	}



	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>